<template>
  <div class="gs-select--box" ref="gsSelectBox">
      <!-- <span class="select is-empty gs-select" style="width:100%;" >
        <select  :value="value" style="width:100%;"  @change="selectChange" @click="dialog = true" ref="select">
          <option v-for="(item,index) in options" :key="index" :value="item.value" >
            <div v-html="item.name" @click="dialog = console.log(dialog)"></div>
          </option>
        </select>
      </span>
      <input class="gs-select--input" v-if="dialog" style="width:80%;height:100%" @click="asd"></input> -->
      <!-- 单选 -->
     
        <input v-if="type=='string'" autocomplete="off"  class="input gs-select--select" ref="gsInput"  style="z-index:3" 
          @input="input" :class="[gsStyle ? 'gs-select--select--'+gsStyle:'']" :placeholder="placeholder">
        </input>
        <div class="gs-select--input" v-if="!dialog && type=='string'" :style="{'background':disabled ? '#f5f5f5' :''}"
          v-html="labelValue"
          :class="[gsStyle ? 'gs-select--input--'+gsStyle:'']"  @click="divClick">
        </div> 
        <i v-if="!dialog && type=='string'" class="gs-input--i iconfont iconclear" @click="iconClick"></i>
 
      

      <!-- 多选  +$[C`kw34)B=DgF  -->
      <span v-if="type=='array'" class="gs--arr-box" :class="[gsStyle ? 'gs--arr-box--'+gsStyle:'']" @click="divClick2" :style="{'background':disabled ? '#f5f5f5' :''}">
        <span class="gs-arr--item" :class="[gsStyle ? 'gs-arr--item--'+gsStyle:'']" v-for="(arrVal,index) in value" :key="index">
          {{getArr(arrVal)}}<i class="iconfont iconclear2 icon" style="margin-left:3px" @click="arrIconClick(arrVal)"></i></span>
        <input  autocomplete="off" class="abs gs-select--select" ref="gsInput"     :style="{'background':disabled ? '#f5f5f5' :''}"
        @input="input"  :placeholder="placeholder"></input> 
      </span>

      <div ref="dialog" class="gs-select--dialog" v-if="dialog" :style="{'top':ftop+'px'}" :class="[dialog ? 'gs-show--'+trends:'gs-hidden--'+trends]">
        <div class="gs-options--box" ref="select">
          <div ref="options" :value="item.value" v-for="(item,index) in optionsCopy" :key="index" @click="selectChange"
          class="gs-select-options" :class="[gsStyle ? 'gs-select-options--'+gsStyle:'', value == item.value ? 'gs-select-options-is--'+gsStyle :'']"  >{{item.name}}</div>
        </div>
      </div>
      

  </div>
</template>
<script>
export default {
  /**
   * @params options: [{name:'',value:''}]
   * @params disabled: 禁用
   * @params height: 高度
   * @params gsStyle: 风格
   * @params trends : 动画
   * @params v-model :  String\Array
   * @params placeholder: 提示
   */
  name: "gsSelect",
  props: {
    disabled: Boolean,
    gsStyle: String,
    trends:String,
    value: null,
    options: Array,
    height: Number,
    placeholder:String
  },
  computed: {
    //计算属性，获得显示名称
    labelValue: function () {
      var obj = (this.value && this.options.find((item) => {if (item.value == this.value) return item;}));
      return obj && obj.name || ""
    },
  },
  model: {
    prop: "value",
    event: "gsselect",
  },
  data() {
    return {
      dialog: false,
      optionsCopy: [],
      ftop:0,
      type:""
    };
  },
  created() {
    this.optionsCopy = JSON.parse(JSON.stringify(this.options)); 
    this.type = Array.isArray(this.value) ? "array" : "string"
  },
  mounted() {
    this.addClick();
    if(Array.isArray(this.value))this.countHeight();
  },
  methods: {
    //绑定点击空白地方关闭
    addClick() {
      document.addEventListener("click", this.webClick, false);
    },
    removeClick(){
      // document.removeEventListener("click",this.webClick,false)
    },
    //监听方法
    webClick(e) {
      const that = this;
      e = e || window.event;
      var dom = e.srcElement || e.target;
      if (dom.className.search("gs-select--select") != -1 || dom.className.search("gs--arr-box") != -1) {
        //
        // console.log(true)
      } else if (that.$refs.dialog && !that.$refs.dialog.contains(dom)) {
        that.dialog = false;
      }
      if(that.type=="array")return false;
      that.$nextTick(() => {
        if (that.$refs.select) {
          const select = that.$refs.select.childNodes;
          for (let index = 0; index < select.length; index++) {
            if (select[index].attributes[0].value == this.value) {
              that.$refs.dialog.scrollTop = select[index].offsetTop - 70;
            }
          }
        }
      });
    },
    getArr(val){
      if(!val)return ""
      const obj = this.options.find((item) => {if (item.value == val) return item || "";})
      return obj &&  obj.name || ""
    },
    divClick() {
      if(this.disabled)return
      this.dialog = true
      this.$refs.gsInput.focus();
    },
    divClick2() {
      if(this.disabled)return
      this.dialog = true
      this.countHeight();
      this.$refs.gsInput.focus();
    },
    //删除arr并重算卡片高度
    arrIconClick(val){
      if(this.disabled)return
      for (let index = 0; index < this.value.length; index++) {
        if(this.value[index] == val)this.value.splice(index,1)
      }
      this.$emit("gsselect", this.value);
      this.countHeight();
      // this.dialog = false;
    },
    iconClick() {
      if(this.disabled)return
      this.$emit("gsselect", "");
      this.$refs.gsInput.value = "";
      this.optionsCopy = JSON.parse(JSON.stringify(this.options));
    },
    input(e) {
      var tmpdata = JSON.parse(JSON.stringify(this.options));
      this.optionsCopy = tmpdata.filter((item) => {
        if (
          String(item.name + item.value)
            .toUpperCase()
            .indexOf(e.target.value.toUpperCase()) != -1
        ) {
          return true;
        }
        return false;
      });
    },
    selectChange(e) {
      if(Array.isArray(this.value)){
        const obj = this.value.find((row)=>{if(row==e.target.attributes.value.value) return row})
        if(!obj){
          this.value.push(e.target.attributes.value.value)
          this.$emit("gsselect", this.value);
          this.countHeight();
          this.$refs.gsInput.value = "";
          this.optionsCopy = JSON.parse(JSON.stringify(this.options));
          this.removeClick();
          this.dialog = false;
        }
      }else{
        this.dialog = false;
        this.$emit("gsselect", e.target.attributes.value.value);
      }
      
      // this.dialog = false;
      // // this.$emit("gsselect", e.target.attributes[0].value); //当前方法废弃
      // this.$emit("gsselect", e.target.attributes.value.value);
      // return false;
    },
    countHeight(){
      this.ftop= this.$refs.gsSelectBox.offsetHeight  - 35
    },
  },
  watch: {
    options: {
      handler() {
        this.optionsCopy = this.options;
      },
      deep: true,
    },
  },
};
</script>



